<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="24">
        <!-- 第一行 finger -->
        <el-row
          type="flex"
          justify="center"
          style="border-bottom: 1px solid grey"
        >
          <span>
            <img src="../../assets/frontdesk/images/finger.png" alt="" />
          </span>
        </el-row>
        <!-- 第2行 newscategorytitle -->
        <el-row type="flex" justify="center">
          <h3>
            <!-- <a :href="'NewsCategory/' + newsCategory.id">{{
              newsCategory.name
            }}</a> -->
            {{ newsCategoryName }}
          </h3>
        </el-row>

        <!-- 第3行 newscategoryitem,每个新闻分类有6个 -->
        <el-row :gutter="40" justify="center" class="newscategoryitem">
          <el-col :span="8" v-for="item in news" :key="item.id">
            <a :href="'/#/News/' + item.id">
              <img :src="baseImgURL + '/' + item.titlePic" />
              <h2 ref="newsTitle">{{ item.title }}</h2>
              <p ref="newsDescribe">{{ item.describe }}</p>
              <span>{{ item.createTime.slice(0, 10) }}</span>
              <span style="float: right"
                >{{ item.appUserName }}&nbsp;&nbsp;&nbsp;</span
              >
            </a>
          </el-col>
        </el-row>
        <el-row
          :gutter="40"
          type="flex"
          style="text-align: center"
          justify="center"
        >
          <el-col :span="24">
            <!-- 在此位置再加一个分页控件 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[9, 18, 27]"
              :page-size="currentPageSize"
              layout="total, sizes, prev, pager, next"
              :total="total"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
* {
  margin: 0%;
  padding: 0%;
}
a {
  text-decoration: none;
  color: #000;
}
.newscategoryitem {
  padding-top: 1%;
}
.newscategoryitem a {
  display: inline-block;
  width: 100%;
  margin-bottom: 5%;
}
.newscategoryitem a > h2:hover {
  color: rgb(191, 64, 56);
}
.newscategoryitem a > img {
  width: 100%;
  height: 164.5px;
  margin-bottom: 2%;
}
.newscategoryitem a > h2 {
  font-size: large;
  margin-bottom: 2%;
}
.newscategoryitem a > p {
  font-size: medium;
  margin-bottom: 2%;
}
</style>

<script>
export default {
  data() {
    return {
      baseImgURL: "http://121.196.246.105:4000/News/TitlePic/",

      currentPage: 0,
      currentPageSize: 9,
    };
  },
  computed: {
    pagedNews() {
      return this.initailizeNews(this.currentPage, this.currentPageSize);
    },
    total() {
      return this.news.length;
    },
  },
  updated() {
    //   console.log(this.$refs.newsTitle);
    this.formatTitle(this.$refs.newsTitle, 16);
    //   console.log(this.$refs.newsDescribe);
    this.formatDescribe(this.$refs.newsDescribe, 35);
  },
  props: {
    newsCategoryName: {
      // type: String,
      required: true,
    },
    news: {
      type: Array,
      required: true,
    },
  },
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.currentPageSize = val;
      this.pagedNews = this.initailizeNews(
        this.currentPage,
        this.currentPageSize
      );
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      // console.log(this.currentPage);
      this.pagedNews = this.initailizeNews(val - 1, this.currentPageSize);
      this.currentPage = val - 1;
    },
    // 加载新闻数据
    initailizeNews(currentPage, currentPageSize) {
      // const that=this;
      return this.news.slice(
        currentPage * currentPageSize,
        currentPage * currentPageSize + currentPageSize
      );
    },
    //   格式化Title
    formatTitle(dataArray, length) {
      for (var i = 0; i < dataArray.length; i++) {
        //   console.log('1');
        if (dataArray[i].innerText.length > length) {
          dataArray[i].innerText =
            dataArray[i].innerText.slice(0, length) + "...";
        }
      }
    },
    //   格式化Describe
    formatDescribe(dataArray, length) {
      for (var i = 0; i < dataArray.length; i++) {
        //   console.log('1');
        if (dataArray[i].innerText.length > length) {
          dataArray[i].innerText =
            dataArray[i].innerText.slice(0, length) + "...";
        } 
        // else 
        // {
        //   var fixedStr = "";
        //   const count = length - dataArray[i].innerText.length;
        //   //   console.log(count);
        //   for (var i = 0; i < count; i++) {
        //     fixedStr += "*";
        //   }
        //   console.log(fixedStr);
        //   let data= dataArray[i].innerText;
        //   console.log(data);
        // //   console.log(dataArray[i].innerText);
        // }
      }
    },
  },
  // mounted() {
  //   this.$nextTick(function () {
  //     // this.pagedNews=this.news;
  //   });
  // },
  // beforeMount() {
  //   console.log(this.news);
  //   this.total = this.news.length;
  // },
};
</script>